<template>
    <van-tabbar v-model="active" placeholder>
        <van-tabbar-item name="StoreHome" icon="shop-o">首页</van-tabbar-item>
        <van-tabbar-item name="StoreProducts" icon="bag-o">商品</van-tabbar-item>
        <van-tabbar-item name="StoreCollections" icon="apps-o">分类</van-tabbar-item>
    </van-tabbar>
</template>

<script>
  import { Tabbar, TabbarItem } from "vant"

  export default {
    name: "StoreTabbar",
    components: {
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem,
    },
    props: {
      id: String,
    },
    computed: {
      active: {
        get() {
          return this.$route.name
        },
        set(name) {
          const { id } = this
          const { collections } = this.$route.query
          if (collections && name === "StoreCollections") {
            this.$router.back()
          } else {
            this.$router.replace({
              name,
              params: { id },
            })
          }
        },
      },
    },
  }
</script>

<style scoped>

</style>
